import { Icon } from '@iconify/react';
import clsx from 'clsx';

interface Props {
  onRetry?: () => void;
  onBack?: () => void;
  className?: string;
}
export function ErrorState({ className, onRetry, onBack }: Props) {
  return (
    <div
      className={clsx(
        'flex min-h-screen items-center justify-center bg-gradient-to-br from-red-50 via-orange-50 to-yellow-50 p-4',
        className
      )}
    >
      <div className="w-full max-w-md">
        {/* 错误图标容器 */}
        <div className="mb-8 text-center">
          <div className="relative inline-block">
            {/* 背景圆圈动画 */}
            <div className="absolute inset-0 animate-ping rounded-full bg-red-100 opacity-75"></div>
            <div className="relative rounded-full bg-white p-6 shadow-lg">
              <Icon
                icon={'cuida:alert-outline'}
                className="h-16 w-16 animate-pulse text-red-500"
              ></Icon>
            </div>
          </div>
        </div>

        {/* 错误信息卡片 */}
        <div className="rounded-2xl border border-red-100 bg-white p-8 shadow-xl">
          {/* 标题 */}
          <div className="mb-6 text-center">
            <h1 className="mb-2 text-2xl font-bold text-gray-800">
              哎呀，出错了！
            </h1>
            <p className="leading-relaxed text-gray-600">
              抱歉，系统遇到了一些问题。请稍后重试，或者联系技术支持获取帮助。
            </p>
          </div>

          {/* 错误详情（可选） */}
          <div className="mb-6 rounded-lg border-l-4 border-red-400 bg-red-50 p-4">
            <div className="flex items-start">
              <Icon
                icon={'cuida:alert-outline'}
                className="mr-3 mt-0.5 h-5 w-5 flex-shrink-0 text-red-400"
              />
              <div>
                <h3 className="mb-1 text-sm font-semibold text-red-800">
                  错误信息
                </h3>
                <p className="text-sm text-red-700">
                  系统处理请求时发生异常，请检查网络连接或稍后重试。
                </p>
              </div>
            </div>
          </div>

          {/* 操作按钮 */}
          <div className="flex flex-col gap-3 sm:flex-row">
            <button
              onClick={onRetry}
              className="flex flex-1 transform items-center justify-center gap-2 rounded-lg bg-red-500 px-6 py-3 font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105 hover:bg-red-600 hover:shadow-xl active:scale-95"
            >
              <Icon icon={'ic:twotone-refresh'} className="h-5 w-5"></Icon>
              重新尝试
            </button>
            <button
              onClick={onBack}
              className="flex flex-1 transform items-center justify-center gap-2 rounded-lg border border-gray-300 bg-gray-100 px-6 py-3 font-semibold text-gray-700 transition-all duration-200 hover:scale-105 hover:bg-gray-200 active:scale-95"
            >
              <Icon icon={'icon-park-outline:back'} className="h-5 w-5"></Icon>
              返回
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
